<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锁定列</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->
<style>
.l-grid-row-cell-inner{
	line-height:40px;
	padding:0 0 0 10px;
}
</style>
</head>
<body>
	<div class="page_content">
		<div id="maingrid"></div>
    </div>
	<script type="text/javascript">
        var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"A":"订单 ID：","B":"10248","C":"客户名称：","D":"山泰企业","E":"雇员：","F":"赵军"},
      {"A":"订购日期：","B":"2010-01-04","C":"发货日期：","D":"2010-07-16","E":"到货日期：","F":"2010-08-01"},
      {"A":"货主名称：","B":"余小姐","C":"货主地址：","D":{value:"北京市朝阳区光华路135号", cols:3}},
      {"A":"货主国家：","B":"中国","C":"货主地区：","D":"华北","E":"货主城市：","F":"北京"},
      {"A":"运货信息：","B":{value:"从上海市发出，正发往北京", cols:5}},
      {"A":"运 货 商：","B":"联邦货运","C":"运 货 费：","D":" 32.38","E":"邮编：","F":"111080"},
      {"A":"<div style='height:150px;line-height:150px;'>备注信息：</div>","B":{value:"<div style='height:150px;line-height:250%;'>发票抬头：北京引领视觉科技有限公司；<br/>赠送一部IPHONE手机</div>", cols:5}}
     
      ]}
       
       //数据表格使用
    var g;
    function initComplete(){
    	 g = $("#maingrid").quiGrid({
                columns: [ 
                  { display: 'A', name: 'A', width: 120, render: function(rowdata, rowindex, value, column){
                       return "<div style='height:100%;background-color:#f8f8f8;text-align:right;padding-right:10px;'>" + value + "</div>";
                      }},
                  { display: 'B', name: 'B', width: 120, render: function(rowdata, rowindex, value, column){
                       return "<div style='height:100%;background-color:#ffffff;text-align:left;padding-left:10px;'>" + value + "</div>";
                      }},
                  { display: 'C', name: 'C',  width: 120, render: function(rowdata, rowindex, value, column){
                       return "<div style='height:100%;background-color:#f8f8f8;text-align:right;padding-right:10px;'>" + value + "</div>";
                      }},
                  { display: 'D', name: 'D',  width:120 , render: function(rowdata, rowindex, value, column){
                       return "<div style='height:100%;background-color:#ffffff;text-align:left;padding-left:10px;'>" + value + "</div>";
                      }},
                  { display: 'D', name: 'E',  width:120 , render: function(rowdata, rowindex, value, column){
                       return "<div style='height:100%;background-color:#f8f8f8;text-align:right;padding-right:10px;'>" + value + "</div>";
                      }},
                  { display: 'D', name: 'F',  width:120, render: function(rowdata, rowindex, value, column){
                       return "<div style='height:100%;background-color:#ffffff;text-align:left;padding-left:10px;'>" + value + "</div>";
                      } }
                ], data:testData, pageSize: 10, rownumbers:false, checkbox:false,showHeader:false,usePager:false,alternatingRow:false,
                height: 'auto', width:720,multiBody:true,hideScrollerX:true,title:"订单基本信息"
            });
    }
    </script>	
</body>
</html>